<!-- Section -->
<div class="section @@classes section-md">
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="mb-4">
                    <span class="h6 font-weight-bold">Pagination with icon-nav</span>
                </div>
                <nav aria-label="Blog page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-6">
                <div class="mt-4 mb-4 mt-sm-0">
                    <span class="h6 font-weight-bold">Pagination with text-nav</span>
                </div>
                <nav aria-label="Products page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#">Previous</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-6">
                <div class="mb-4">
                    <span class="h6 font-weight-bold">Disabled and active states</span>
                </div>
                <nav aria-label="Templates page navigation">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" aria-label="first link" tabindex="-1" href="#">Previous</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-lg-6">
                <div class="mt-4 mb-4 mt-sm-0">
                    <span class="h6 font-weight-bold">Choose your size</span>
                </div>
                <nav aria-label="Default page navigation">
                    <ul class="pagination pagination-lg">
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
                        </li>
                    </ul>
                </nav>
                <nav aria-label="Themesberg page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
                        </li>
                    </ul>
                </nav>
                <nav aria-label="Posts navigation example">
                    <ul class="pagination pagination-sm">
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->